<!doctype html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]>
<html class="lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-US"> <!--<![endif]-->
<head>
    <!-- META TAGS -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Knowledge Base Template</title>

    <link rel="shortcut icon" href="../../images/favicon.png"/>


    <!-- Google Web Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
          rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'>

    <!-- Style Sheet-->
    <link rel="stylesheet" href="style.css"/>
    <link rel='stylesheet' id='bootstrap-css-css' href='../../css/bootstrap.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='responsive-css-css' href='../../css/responsive.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='pretty-photo-css-css' href='../../js/prettyphoto/prettyPhoto.css' type='text/css'
          media='all'/>
    <link rel='stylesheet' id='main-css-css' href='../../css/main.css' type='text/css' media='all'/>


    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="../../js/html5.js"></script>
    <![endif]-->

</head>

<body>

<!-- Start of Header -->
<div class="header-wrapper">
    <header>
        <div class="container">


            <div class="logo-container">
                <!-- Website Logo -->
                <a href="index.html" title="Knowledge Base Theme">
                    <img src="../../images/logo.png" alt="Knowledge Base Theme">
                </a>
                <span class="tag-line">Premium HTML Template</span>
            </div>


            <!-- Start of Main Navigation -->
            <nav class="main-nav">
                <div class="menu-top-menu-container">
                    <ul id="menu-top-menu" class="clearfix">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="categories.html">Home 2</a></li>
                        <li><a href="home-categories-articles.html">Home 3</a></li>
                        <li><a href="articles.html">Articles List</a></li>
                        <li><a href="faq.html">FAQs</a></li>
                        <li><a href="#">Skins</a>
                            <ul class="sub-menu">
                                <li><a href="blue-skin.html">Blue Skin</a></li>
                                <li><a href="green-skin.html">Green Skin</a></li>
                                <li><a href="red-skin.html">Red Skin</a></li>
                                <li><a href="index.html">Default Skin</a></li>
                            </ul>
                        </li>
                        <li><a href="#">More</a>
                            <ul class="sub-menu">
                                <li><a href="full-width.html">Full Width</a></li>
                                <li class="current-menu-item"><a href="elements.html">Elements</a></li>
                                <li><a href="page.html">Sample Page</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </nav>
            <!-- End of Main Navigation -->

        </div>
    </header>
</div>
<!-- End of Header -->

<!-- Start of Search Wrapper -->
<div class="search-area-wrapper">
    <div class="search-area container">
        <h3 class="search-header">Have a Question?</h3>

        <p class="search-tag-line">If you have any question you can ask below or enter what you are looking for!</p>

        <form id="search-form" class="search-form clearfix" method="get" action="#" autocomplete="off">
            <input class="search-term required" type="text" id="s" name="s" placeholder="Type your search terms here"
                   title="* Please enter a search term!"/>
            <input class="search-btn" type="submit" value="Search"/>

            <div id="search-error-container"></div>
        </form>
    </div>
</div>
<!-- End of Search Wrapper -->

<!-- Start of Page Container -->
<div class="page-container">
    <div class="container">
        <div class="row">

            <!-- start of page content -->
            <div class="span12 page-content">

                <article class="type-page hentry clearfix">

                    <h1 class="post-title"><a href="#">Elements</a></h1>

                    <hr>

                    <h3>Tabs</h3>

                    <ul class="tabs-nav">
                        <li class="active" style=""><a href="#">First Tab</a></li>
                        <li><a href="#">Second Tab</a></li>
                        <li><a href="#">Third Tab</a></li>
                    </ul>

                    <div class="tabs-container">
                        <div class="tab-content">First lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
                            enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                            aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
                            velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                            accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                            dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
                            nihil imperdiet doming id quod mazim placerat facer possim assum.
                        </div>
                        <div class="tab-content">Second lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
                            enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                            aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
                            velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                            accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                            dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
                            nihil imperdiet doming id quod mazim placerat facer possim assum.
                        </div>
                        <div class="tab-content">Third lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
                            enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                            aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
                            velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                            accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                            dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
                            nihil imperdiet doming id quod mazim placerat facer possim assum.
                        </div>
                    </div>

                    <h3>Accordion</h3>
                    <dl class="accordion clearfix">
                        <dt><span></span>First Accordion Item</dt>
                        <dd>Although starting a prototype on a is sometimes easi problem-solve. When you need to ideate
                            website prototype on a is sometimes easier, it’s not the best When you or to storyboard
                            context Although starting a prototype on a is sometimes easi problem- solve. When you need
                            to ideate website …
                        </dd>

                        <dt><span></span>Second Accordion Item</dt>
                        <dd>Although starting a prototype on a is sometimes easi problem-solve. When you need to ideate
                            website prototype on a is sometimes easier, it’s not the best When you or to storyboard
                            context Although starting a prototype on a is sometimes easi problem- solve. When you need
                            to ideate website …
                        </dd>

                        <dt><span></span>Third Accordion Item</dt>
                        <dd>Although starting a prototype on a is sometimes easi problem-solve. When you need to ideate
                            website prototype on a is sometimes easier, it’s not the best When you or to storyboard
                            context Although starting a prototype on a is sometimes easi problem- solve. When you need
                            to ideate website …
                        </dd>
                    </dl>

                    <h3>Toggles</h3>
                    <dl class="toggle clearfix">
                        <dt><span></span>First Accordion Item</dt>
                        <dd>Although starting a prototype on a is sometimes easi problem-solve. When you need to ideate
                            website prototype on a is sometimes easier, it’s not the best When you or to storyboard
                            context Although starting a prototype on a is sometimes easi problem- solve. When you need
                            to ideate website …
                        </dd>

                        <dt><span></span>Second Accordion Item</dt>
                        <dd>Although starting a prototype on a is sometimes easi problem-solve. When you need to ideate
                            website prototype on a is sometimes easier, it’s not the best When you or to storyboard
                            context Although starting a prototype on a is sometimes easi problem- solve. When you need
                            to ideate website …
                        </dd>

                        <dt><span></span>Third Accordion Item</dt>
                        <dd>Although starting a prototype on a is sometimes easi problem-solve. When you need to ideate
                            website prototype on a is sometimes easier, it’s not the best When you or to storyboard
                            context Although starting a prototype on a is sometimes easi problem- solve. When you need
                            to ideate website …
                        </dd>
                    </dl>

                    <h3>Blockquote</h3>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                            nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
                            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
                            blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                    </blockquote>

                    <h3>Messages</h3>

                    <p class="error">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                        consequat.</p>

                    <p class="success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                        consequat.</p>

                    <p class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                        consequat.</p>

                    <p class="notice">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                        consequat.</p>


                </article>
            </div>
            <!-- end of page content -->

        </div>
    </div>
</div>
<!-- End of Page Container -->

<!-- Start of Footer -->
<footer id="footer-wrapper">
    <div id="footer" class="container">
        <div class="row">

            <div class="span3">
                <section class="widget">
                    <h3 class="title">How it works</h3>

                    <div class="textwidget">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                            tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                            ut aliquip ex ea commodo consequat. </p>
                    </div>
                </section>
            </div>

            <div class="span3">
                <section class="widget"><h3 class="title">Categories</h3>
                    <ul>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Advanced Techniques</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Designing in WordPress</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Server &amp; Database</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet, ">Theme Development</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">Website Dev</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet,">WordPress for Beginners</a></li>
                        <li><a href="#" title="Lorem ipsum dolor sit amet, ">WordPress Plugins</a></li>
                    </ul>
                </section>
            </div>

            <div class="span3">
                <section class="widget">
                    <h3 class="title">Latest Tweets</h3>

                    <div id="twitter_update_list">
                        <ul>
                            <li>No Tweets loaded !</li>
                        </ul>
                    </div>
                    <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
                            type="text/javascript"></script>
                    <script type="text/javascript">
                        getTwitters("twitter_update_list", {
                            id:"960development",
                            count:3,
                            enableLinks:true,
                            ignoreReplies:true,
                            clearContents:true,
                            template:"%text% <span>%time%</span>"
                        });
                    </script>
                </section>
            </div>

            <div class="span3">
                <section class="widget">
                    <h3 class="title">Flickr Photos</h3>

                    <div class="flickr-photos" id="basicuse">
                    </div>
                </section>
            </div>

        </div>
    </div>
    <!-- end of #footer -->

    <!-- Footer Bottom -->
    <div id="footer-bottom-wrapper">
        <div id="footer-bottom" class="container">
            <div class="row">
                <div class="span6">
                    <p class="copyright">
                        Copyright © 2013. All Rights Reserved by KnowledgeBase.
                    </p>
                </div>
                <div class="span6">
                    <!-- Social Navigation -->
                    <ul class="social-nav clearfix">
                        <li class="linkedin"><a target="_blank" href="#"></a></li>
                        <li class="stumble"><a target="_blank" href="#"></a></li>
                        <li class="google"><a target="_blank" href="#"></a></li>
                        <li class="deviantart"><a target="_blank" href="#"></a></li>
                        <li class="flickr"><a target="_blank" href="#"></a></li>
                        <li class="skype"><a target="_blank" href="skype:#?call"></a></li>
                        <li class="rss"><a target="_blank" href="#"></a></li>
                        <li class="twitter"><a target="_blank" href="#"></a></li>
                        <li class="facebook"><a target="_blank" href="#"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Footer Bottom -->

</footer>
<!-- End of Footer -->

<a href="#top" id="scroll-top"></a>

<!-- script -->
<script type='text/javascript' src='../../js/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='../../js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='../../js/prettyphoto/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='../../js/jflickrfeed.js'></script>
<script type='text/javascript' src='../../js/jquery.liveSearch.js'></script>
<script type='text/javascript' src='../../js/jquery.form.js'></script>
<script type='text/javascript' src='../../js/jquery.validate.min.js'></script>
<script type='text/javascript' src='../../js/custom.js'></script>

</body>
</html>

